<template>
  <div class="container">
    <div class="outer-box">
      <div class="left-box">
        <div style="margin-top: 20px" class="radio-box">
          <el-radio-group v-model="radio" @input="handleInput">
            <el-radio :label="1">全部活动</el-radio>
            <el-radio :label="2">未开始</el-radio>
            <el-radio :label="3">已结束</el-radio>
          </el-radio-group>
        </div>
        <ul>
          <li class="item-li" v-for="item in eventList" :key="item.event.eventid">
            <!-- <div class="item-top">
              <el-avatar shape="square" :src="require('@/assets/avator/'+item.avatar)"></el-avatar>
              <div class="username">{{ item.username }}</div>
              <div class="publishtime">{{item.event.publishtime}}</div>
            </div>
            <div class="item-center">
              <el-descriptions class="tab">
                <el-descriptions-item label="活动主题">{{ item.event.title }}</el-descriptions-item>
                <el-descriptions-item label="活动内容">{{ item.event.detail }}</el-descriptions-item>
                <el-descriptions-item label="地点">{{ item.event.address }},{{ item.event.addressdetail }}</el-descriptions-item>
                <el-descriptions-item label="类型">
                  <el-tag size="small">{{ item.event.type }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="活动状态">
                  <el-tag size="small" :type="item.event.state == '未开始'?'success':'danger'">{{ item.event.state }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="报名信息">
                  <span>{{item.event.signed}}/<b style="color: red; font-size: 16px;">{{ item.event.size }}</b></span>
                  <el-tooltip class="item" effect="dark" :content="isSigned?'已报名':''" :disabled="!isSigned" placement="top">
                    <el-tag size="small" class="bm" type="info" @click="handleSignIn(item.event.eventid)">立即报名</el-tag>
                  </el-tooltip>
                </el-descriptions-item>
            </el-descriptions>
            </div> -->
            <Event :item="item"/>
          </li>
        </ul>
        
        <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :current-page="pageInfo.pageNum"
          @current-change="handleCurrentChange"
          :page-count="pageCount"
          :page-size=pageInfo.pageSize
          :hide-on-single-page="true"
          >
        </el-pagination>
      </div>
      </div>
      <div class="right-box">
        <Race/>
      </div>
    </div>
  </div>
</template>

<script>
import {GetEventListByPage,GetByState, LikePage,SignInEvent} from '@/request/api'
import { mapActions } from 'vuex';
import Event from '@/components/things/event.vue'
import Race from '@/components/race/race_main.vue'
export default {
  data(){
    return{
        params:{
          pageNum:1,
          state:''
        },
        pageInfo:{},
        pageCount:null,
        eventList:[],
        radio:1,
        flag:1,
        signParams:{
          eventid:null
        },
        isSigned:false
    }
  },
  components:{
    Event,Race
  },
  methods:{
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
    }),
      async handleCurrentChange(pageNum) {
        if (this.flag == 1) {
          // 查看全部
          this.params.pageNum = pageNum;
          let res = await GetEventListByPage(this.params);
          this.pageInfo = res.data.data;
          this.eventList = res.data.data.list;
          this.pageCount = Math.ceil(res.data.data.total / 5-1);
        } else if (this.flag == 2) {
          this.params.state = '未开始';
          this.params.pageNum = pageNum;
          let res = await GetByState(this.params);
          this.pageInfo = res.data.data;
          this.eventList = res.data.data.list;
          this.pageCount = Math.ceil(res.data.data.total / 5-1);
        } else {
          this.params.state = '已结束';
          this.params.pageNum = pageNum;
          let res = await GetByState(this.params);
          this.pageInfo = res.data.data;
          this.eventList = res.data.data.list;
          this.pageCount = Math.ceil(res.data.data.total / 5-1);
        }
      },
      async handleInput(label) {
        this.pageInfo.pageNum = 1;
        if (label == 1) {
          this.flag = 1;
          this.params.pageNum = 1;
          let res = await GetEventListByPage(this.params);
          this.pageInfo = res.data.data;
          this.eventList = res.data.data.list;
          this.pageCount = Math.ceil(res.data.data.total / 5-1);
        } else if (label == 2) {
          this.flag = 2;
          this.params.state = '未开始';
          this.params.pageNum = 1;
          let res = await GetByState(this.params);
          this.pageInfo = res.data.data;
          this.eventList = res.data.data.list;
          this.pageCount = Math.ceil(res.data.data.total / 5-1);
        } else if (label == 3) {
          this.flag = 3;
          this.params.state = '已结束';
          this.params.pageNum = 1;
          let res = await GetByState(this.params);
          this.pageInfo = res.data.data;
          this.eventList = res.data.data.list;
          this.pageCount = Math.ceil(res.data.data.total / 5-1);
        }
      },
      async handleSignIn(eventid){
        console.log("eventid",eventid)
        this.signParams.eventid = eventid;
        let res = await SignInEvent(this.signParams)
        if(res.data.state == 200){
          // 成功
          this.asyncChangeIsShowToast({
            type:'success',
            msg:'报名成功！'
          })
          this.isSigned = true
        }else{
          this.asyncChangeIsShowToast({
            type:'error',
            msg:'报名失败！'
          })
          this.isSigned = false
        }
      }
  },
  async created() {
    let res = await GetEventListByPage(this.params);
    this.pageInfo = res.data.data;
    this.eventList = res.data.data.list;
    this.pageCount = Math.ceil(res.data.data.total / 5-1);
  }
}
</script>

<style scoped>
.outer-box{
  display: flex;
  flex-direction: row;
}
.left-box{
  flex: 7;
  border: 1px solid #e3dede;
  background-color: white;
  margin-right: 16px;
}
.right-box{
  flex: 3;
  border: 1px solid #e3dede;
}
ul{
  list-style: none;
  background-color: white;
}
.item-li{
  padding: 10px;
  /* background-color: rgb(244,244,245); */
  margin-bottom: 10px;
  border: 1px solid #e3dede;
}
.item-li:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.tab{
  margin-top: 20px;
}
.item-top{
  display: flex;
  flex-direction: row;
  position: relative;
}
.username{
  margin-left: 20px;
  margin-top: 10px;
}
.publishtime{
  position: absolute;
  top: 10px;
  right: 20px;
}
.bm{
  cursor: pointer;
  margin-left: 10px;
}
.bm:hover{
  background-color: #409EFF;
  color: white;
}
.block{
  text-align: center;
}
.radio-box{
  margin-bottom: 20px;
  display: flex;
  flex-direction: row-reverse;
  padding-right: 20px;
}
</style>
